/**
 * 采购订单
 */
import * as React from 'react'
import { Card, Button, Form, Row, Col, Select, Input, DatePicker, Icon } from 'antd'
import Authentication from '../../router/Authentication'
import moment from 'moment'
import { PageHeaderLayout, StandardTable } from '../../components'
import '../../assets/style/TableList.less'
const FormItem = Form.Item
const Option = Select.Option
const { RangePicker } = DatePicker
export interface State {
  formValues: string
  expandForm: boolean
}

@Authentication
class Order extends React.Component<any, State> {
  
  state = {
    formValues: '',
    expandForm: false
  }
  componentDidMount () {
    this.search({}, {})
  }

  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: ''
    })
    this.search({}, {})
  }
  /**
   * 点击查询按钮
   */
  handleSearch = (e: any) => {
    e.preventDefault()
    const { form, data: { pagination } } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      if(fieldsValue.time) {
        Object.assign(fieldsValue, { v_startdate: moment(fieldsValue.time[0]).format('YYYY-MM-DD') })
        Object.assign(fieldsValue, { v_enddate: moment(fieldsValue.time[1]).format('YYYY-MM-DD') })
      }
      this.setState({
        formValues: fieldsValue
      })
      this.search({
        ...fieldsValue,
        startrow: pagination.current,
        pagesize: pagination.pageSize,
      }, pagination)
    })
  }
  /**
   * 调用查询方法
   */
  search (param: any, page: any) {
    const { list } = this.props
    list(param, page)
  }
  toggleForm = () => {
    const { expandForm } = this.state
    this.setState({
      expandForm: !expandForm,
    })
  }
  renderAdvancedForm() {
    const { form } = this.props
    const { expandForm } = this.state
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="订单编号" {...formItemLayout}>
              {getFieldDecorator('v_sheetid')(
                <Input placeholder="请输入订单编号" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="审核时间" {...formItemLayout}>
              {getFieldDecorator('time')(
                <RangePicker format="YYYY-MM-DD" style={{width: '100%'}} placeholder = {['开始时间', '结束时间']}/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className="submitButtons" style={{textAlign: 'center'}}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>  
                {expandForm?
                  <span> 收起 <Icon type="up" /></span>:
                  <span>展开 <Icon type="down" /></span>
                }
              </a>
            </span>
          </Col>
        </Row>
        {expandForm&&(<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="确认状态" {...formItemLayout}>
              {getFieldDecorator('v_status')(
                <Select placeholder="请选择确认状态">
                  <Option value={1}>未发货</Option>
                </Select>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="商品货号" {...formItemLayout}>
              {getFieldDecorator('v_customno')(
                <Input placeholder="请输入货号" />)}
            </FormItem>
          </Col>
        </Row>)}
      </Form>
        
    )
  }
  /**
   * 筛选或者更改分页
   */
  handleStandardTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const { formValues } = this.state
    let params: any = formValues
    params = {
      ...params,
      startrow: pagination.current,
      pagesize: pagination.pageSize,
    }
    this.search(params, pagination)
  }
  //查看详情
  handleInfo = (row: any) => {
    const { recordId } = this.props
    recordId(row)
    this.props.history.push({ pathname: '/orderlist/detail' })
  }
  render () {
    const { loading, data } = this.props
    const columns: any [] = [
      {
        title: '订单编号',
        dataIndex: 'sheetid',
      },
      // {
      //   title: '供应商编号',
      //   dataIndex: 'venderid',
      // },
      {
        title: '货号',
        dataIndex: 'customno'
      },
      // {
      //   title: '门店编号',
      //   dataIndex: 'shopid'
      // },
      // {
      //   title: '款号',
      //   dataIndex: 'majorid'
      // },
      // {
      //   title: '开始时间',
      //   dataIndex: 'startdate'
      // },
      // {
      //   title: '编辑人',
      //   dataIndex: 'editor'
      // },
      {
        title: '审核人',
        dataIndex: 'checker'
      },
      {
        title: '审核日期',
        dataIndex: 'checkdate',
      },
      // {
      //   title: '单据状态',
      //   dataIndex: 'flag'
      // },
      {
        title: '完结状态',
        dataIndex: 'finishnote'
      },
      {
        title: '发货状态',
        dataIndex: 'status'
      },
      {
        title: '发货确认人',
        dataIndex: 'vchecker'
      },
      {
        title: '发货确认时间',
        dataIndex: 'vcheckdate'
      },
      {
        title: '操作',
        render: (row: any) => (
          <React.Fragment>
            <a onClick={ () => this.handleInfo(row)}>查看</a>
          </React.Fragment>
        ),
      },
    ]
    return (
      <PageHeaderLayout
        title="">
        <Card bordered={false}>
          <div className="tableList">
            <div className="tableListForm">{this.renderAdvancedForm()}</div>
            <StandardTable
              rowKey = "sheetid"
              select = {false}
              loading={loading}
              data={data}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(Order)